<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/Gamepage.css" />
		<link rel="stylesheet" type="text/css" href="font/iconfont.css" />
		<style type="text/css">
			#frame {
				/*----------图片轮播相框容器----------*/
				position: absolute;
				/*--绝对定位，方便子元素的定位*/
				top: 132px;
				left: 281px;
				width: 200px;
				height: 360px;
				overflow: hidden;
				border: 3px solid black;
				border-radius: 25px;
				/*--相框作用，只显示一个图片---*/
				/*            border-radius:5px; */
			}
			
			#photos img {
				float: left;
				width: 200px;
				height: 100%;
				border-radius: 25px;
			}
			
			#photos {
				/*---设置总的图片宽度--通过位移来达到轮播效果----*/
				position: absolute;
				z-index: 9px;
				width: calc(300px * 5);
				/*---修改图片数量的话需要修改下面的动画参数*/
			}
			
			.play {
				animation: ma 20s ease-out infinite alternate;
				/**/
			}
			
			@keyframes ma {
				/*---每图片切换有两个阶段：位移切换和静置。中间的效果可以任意定制----*/
				0%,
				20% {
					margin-left: 0px;
				}
				25%,
				40% {
					margin-left: -200px;
				}
				45%,
				60% {
					margin-left: -400px;
				}
				65%,
				80% {
					margin-left: -600px;
				}
				85%,
				100% {
					margin-left: -800px;
				}
			}
			
			.num {
				position: absolute;
				z-index: 10;
				display: inline-block;
				right: 25px;
				bottom: 7px;
				border-radius: 100%;
				background: white;
				width: 20px;
				height: 20px;
				line-height: 25px;
				cursor: pointer;
				text-align: center;
				opacity: 0.8;
			}
			
			.num:hover {
				background: #0099FF;
			}
			
			.num:hover,
			#photos:hover {
				animation-play-state: paused;
			}
			
			.num:nth-child(2) {
				margin-right: 30px
			}
			
			.num:nth-child(3) {
				margin-right: 60px
			}
			
			.num:nth-child(4) {
				margin-right: 90px
			}
			
			.num:nth-child(5) {
				margin-right: 120px
			}
			
			#a1:hover~#photos {
				animation: ma1 .5s ease-out forwards;
			}
			
			#a2:hover~#photos {
				animation: ma2 .5s ease-out forwards;
			}
			
			#a3:hover~#photos {
				animation: ma3 .5s ease-out forwards;
			}
			
			#a4:hover~#photos {
				animation: ma4 .5s ease-out forwards;
			}
			
			#a5:hover~#photos {
				animation: ma5 .5s ease-out forwards;
			}
			
			@keyframes ma1 {
				0% {
					margin-left: -800px;
				}
				100% {
					margin-left: -0px;
				}
			}
			
			@keyframes ma2 {
				0% {
					margin-left: -800px;
				}
				100% {
					margin-left: -200px;
				}
			}
			
			@keyframes ma3 {
				100% {
					margin-left: -400px;
				}
			}
			
			@keyframes ma4 {
				100% {
					margin-left: -600px;
				}
			}
			
			@keyframes ma5 {
				100% {
					margin-left: -800px;
				}
			}
		</style>
	</head>

	<body>
		<div id="bg"></div>
		<div class="warp">
			<header class="clearfix">
				<div class="header_bg"></div>
				<div class="officia_icon">
					<a href="#"><img src="img/homepage_icon.png" /></a>
				</div>
				<div class="pang_menu">
					<ul>
						<li>
							<a href="index.html">首页<span>page</span></a>
						</li>
						<li>
							<a href="Gamelist.html">游戏<span>game</span></a>
						</li>
						<li>
							<a href="Gamepage.html">案例<span>Case</span></a>
						</li>
						<li>
							<a href="index.html">关于我们<span>Abuot Us</span></a>
						</li>
						<li>
							<a href="#"><i class="iconfont icon-unie61d"></i></a>
						</li>
					</ul>
				</div>

			</header>
			<nav class="clearfix">
				<div class="nav_bg"></div>
				<div class="ipone6">
					<img src="img/gamepage/ipone.png" />
				</div>
				<div id="frame">
					<a id="a1" class="num"></a>
					<a id="a2" class="num"></a>
					<a id="a3" class="num"></a>
					<a id="a4" class="num"></a>
					<a id="a5" class="num"></a>
					<div id="photos" class="play">
						<img src="img/index/lunbo1.png">
						<img src="img/index/lunbo2.png">
						<img src="img/index/lunbo3.png">
						<img src="img/index/lunbo4.png">
						<img src="img/index/lunbo5.png">

					</div>
				</div>
				<div class="gamepage_content">
					<ul>
						<li></li>
						<li>宝石迷阵</li>
						<li>《宝石迷阵》与暴司时候发行的游的的戏《星际争霸》一样，是一款成功的即时战略游戏。 游戏时战略游戏所要素：建设基地和指挥指挥战斗。游戏的操作方式也，秉承了星霸优点， 并对星际争霸中一些繁琐的操作进行了简化。
						</li>
					</ul>
					<ul class="clearfix">
							<li><a href="#">收藏</a></li>
							<li><a href="#">制作游戏</a></li>
							<li><a href="#">购买</a></li>
						</ul>
				</div>
				<div class="lalal">
				<ul class="clearfix">
					<li>
						<div class="yuanxing">
							<i class="iconfont icon-shijian"></i>
						</div>
						<span>时间</span>
						<span>2014-07-09</span>
					</li>
					<li>
						<div class="yuanxing">
							<i class="iconfont icon-jiage"></i>
						</div>
						<span>价格</span>
						<span>2333</span>
					</li>
					<li>
						<div class="yuanxing">
							<i class="iconfont icon-shijian"></i>
						</div>
						<span>使用次数</span>
						<span>20</span>
					</li>
					<li>
						<div class="yuanxing">
							<i class="iconfont icon-folder"></i>
						</div>
						<span>大小</span>
						<span>1034KB</span>
					</li>
				</ul>
					</div>
			</nav>
			<section>
				<div class="section_bg"></div>
				<div class="gamepage_content">
					<ul>
						<li></li>
						<li>使用方法<span>use Methods</span></li>
					</ul>
					
				</div>
				<div class="tupp">
				<ul class="clearfix">
				<li><a href="#"><img src="img/index/green_ip.png"/></a></li>
				<li><a href="#"><img src="img/index/pink_ip.png"/></a></li>
				<li><a href="#"><img src="img/index/bule_ip.png"/></a></li>
			</ul>
			<ul class="clearfix">
				<li>STEP<span>选择一个游戏，换图</span></li>
				<li>THE SECOND STEP<span>选择一个游戏，换图</span></li>
				<li>THE THIRD STEP<span>选择一个游戏，换图</span></li>
			</ul>
			</div>
				<footer>
				<div class="foot">
					<img src="img/index/foot_1.png"/>
					<img src="img/index/foot_2.png"/>
					Copyright © 2014 Pangtang. All Rights Reserved. 版权所有
				</div>
			</footer>
			</section>
		</div>
	</body>

</html>